<template>
    <view class="content">
        <view class="cont">
            <view class="title">
				<image :src="site.image_uri" class="logo" mode="aspectFit"></image>
				<view>{{site.name}}</view>
            </view>
            <view class="denglu">
                <view>为了完整体验，了解更多活动，小程序需要您的授权（授权仅用于用户识别）</view>
            </view>
			<!-- #ifdef MP-WEIXIN -->
            <button class="btn" @click="getUserInfo">用户一键登录</button>
			<!-- #endif -->
            <button class="btn1"  @click="backClick()">取消登录</button>
        </view>
        
        <!--  绑定手机  -->
        <u-popup v-model="show" mode="center" border-radius="12" :mask-close-able="false">
        	<view class="padding-lr-xl padding-bottom-xl padding-top-lg" style="width: 80vw;">
        		<view class="flex align-center flex-direction padding-lr-lg">
					<image :src="site.image_uri" class="logo" mode="aspectFit"></image>
        			<view class="margin-top-sm text-gray text-sm">请继续绑定手机号码</view>
        		</view>
        		<view class="padding-top">
        			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
        				class="btn text-white text-center text-df bg-green">绑定手机号码</button>
        		</view>
        	</view>
        </u-popup>
        
        <!-- 隐私协议弹窗 -->
        <!-- <u-mask :show="privacyShow" @click="privacyShow = false" :zoom="false">
            <view class="privacy-pop">
                <view class="privacy-pop-box">
                    <privacyAuthModel ref="privacyAuthModel" />
                </view>
            </view>
        </u-mask> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                privacyShow: false,// 协议弹窗
                show: false, // 绑定手机
                code: '',
				site: {},
            };
        },
        onLoad(option) {
			console.log(option)
            if (option.show) {
                this.show = true;
            }
			this.getSite()
        },
        onShow() {
            const _this = this;
			
			// #ifdef MP-WEIXIN
            uni.login({
            	provider: 'weixin',
            	success: res => {
                    console.log(res)
            		_this.code = res.code
            	},
            	fail(err) {
            		console.log('登录失败' + JSON.stringify(err))
            	}
            })
			// #endif
        },
        methods: {
			getSite() {
				this.$ajax('login/getConfig', {
					
				}).then(ret => {
					if (ret.status == 0) {
			            this.site = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
        	// 获取用户微信信息
        	getUserInfo() {
                const _this = this;
        		// 同意授权
        		uni.getUserProfile({
        			desc: '登录用于展示您的用户信息',
        			success: function(infoRes) {
        				_this.$ajax('login/weixinGetOpenId', {
        					encryptedData: infoRes.encryptedData,
        					iv: infoRes.iv,
        					code: _this.code,
                            parent_code: _this.$getSync('parentID') || '',
        				}).then(ret => {
        					if (ret.status == 0) {
                                uni.setStorageSync('userToken', ret.data.userToken);
                                uni.setStorageSync('userId', ret.data.info.id);
								
                                if (ret.data.info.mobile){
									uni.setStorageSync('MOBILE', ret.data.info.mobile);
                                	uni.showModal({
                                		title: '提示',
                                		content: '登录成功',
                                		showCancel: false,
                                		confirmColor:'#2558ab',
                                		success: function(res) {
                                			uni.navigateBack({
                                				delta: 1
                                			})
                                		}
                                	});
                                } else {
                                	_this.show = true;
                                }
        					} else {
        						_this.$toast(ret.message);
        					}
        				})
        			}
        		})
        	},
			
        	// 绑定手机号
        	getPhoneNumber(data) {
                console.log('data',data)
        		const _this = this;
                _this.$ajax('login/getPhoneNumber', {
                    code: data.detail.code,
                	encryptedData: data.detail.encryptedData,
                	iv: data.detail.iv,
                	userToken: _this.$getSync('userToken'),
                }).then(ret => {
                	_this.show = false;
                	if (ret.status == 0) {
						_this.bindMobile(ret.data.phoneNumber)
						
                	} else {
                		_this.$toast(ret.message);
                	}
                })
        	},
			
			// 绑定手机号
			bindMobile(mobile) {
				this.$ajax('login/createMobile', {
					userToken: this.$getSync('userToken'),
					mobile: mobile,
				}).then(ret => {
					if (ret.status == 0) {
			            uni.setStorageSync('MOBILE', ret.data.mobile);
						
						uni.showModal({
							title: '提示',
							content: '登录成功',
							showCancel: false,
							confirmColor:'#2558ab',
							success: function(res) {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					} else {
						this.$toast(ret.message);
					}
				});
			},
            
        	backClick() {
        		uni.removeStorageSync('userToken')
                uni.removeStorageSync('userId')
        		uni.navigateBack({
        			delta: 1
        		})
        	},
        }
    };
</script>

<style>
    page{
        background: linear-gradient(to bottom,#e6f0f7,#7dc2f2);
    }
</style>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
	}
	.cont {
		padding: 80upx;
	}
	.denglu {
		padding: 60rpx 0;
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}
	.title {
		font-size: 44rpx;
		font-weight: bold;
		text-align: center;
	}
	.logo {
		// width: 227rpx;
		// height: 102rpx;
		width: 230rpx;
		height: 230rpx;
		margin: 0 auto;
	}


	.btn,
	.btn1 {
		color: #fff;
		margin-bottom: 20rpx;
		border-radius: 0px;
		height: 92rpx;
		line-height: 92rpx;
		font-size: 30rpx;
		border-radius: 92rpx;
	}

	.btn::after,
	.btn1::after {
		border: none;
	}

	.btn {
		background: #2558ab !important;
	}

	.btn1 {
		background: #ffffff;
		color: #466f95;
	}

	// 弹出层
	.privacy-pop {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		.privacy-pop-box {
			width: 580rpx;
			border-radius: 20rpx;
			background: white;
			padding: 50rpx;
			position: relative;
			.privacy-icon {
				position: absolute;
				left: 50%;
				top: -55rpx;
				height: 110rpx;
				width: 160rpx;
				transform: translateX(-50%);
			}
			.privacy-title {
				font-size: 34rpx;
				font-weight: bold;
				text-align: center;
				padding: 50rpx 30rpx 30rpx;
			}
			.privacy-txt {
				padding: 0px 30rpx;
				font-size: 24rpx;
			}
			.no-agree {
				font-size: 26rpx;
				line-height: 26rpx;
				color: #717171;
				padding: 30rpx 0rpx;
			}
			.agree {
				padding: 10rpx 100rpx 60rpx;
				view {
					background: #f0b31c;
					height: 80rpx;
					border-radius: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: white;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
